<template>
    <div id="groupforUser" >
        <el-tree
        style="width: 100%"
        :data="data"
        show-checkbox
        ref="groupref"
        node-key="groupId" 
        :expand-on-click-node="false"
        :check-on-click-node="true"
        :default-expand-all= "true"
        @check-change="handleCheckChange"
        @node-click="handleClickNode"
        :props="defaultProps">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                    <el-checkbox :disabled="data.isShowChecked" v-model="data.isDefault">设置默认</el-checkbox>
                </span>
            </span>
        </el-tree>
    </div>
</template>
<script>
export default {
    props: ['groupsp', 'type', 'index'],
    data() {
        return {
          
            data: [],
            defaultProps: {
                children: 'children',
                label: 'groupName'
            },
            groups: [],
            allGroupIds: []
        }
    },
    computed: {
        groupsps() {
            return this.groupsp
        }
    },
    watch: {
        groupsp(val) {
            this.getGroupsList()
        }
    },
    mounted() {
        this.getGroupsList()
        
    },
    methods: {
        getGroupsList() {
            this.$server.systemControlApi.getSystemGroupsList().then( res => {
                this.data= this.setisDefaultForitem(res.data)
                this.data= this.getAllGroupsId(this.groupsps, this.data)
                if(this.groupsps.length > 0) {
                    let arr= []
                    this.groupsps.forEach(item => {
                        arr.push(item.groupId)
                    })
                    let arr1= []
                    for(let i=0; i< arr.length; i++) {
                        if(this.allGroupIds.length > 0) {

                            for(let j=0; j< this.allGroupIds.length; j++) {
                                if(arr[i] != this.allGroupIds[j]) {
                                    arr1.push(arr[i])
                                }
                            }
                        }else{
                            arr1= arr
                        }
                    }
                    this.$refs.groupref.setCheckedKeys(arr1)
                }
            })
        },
        setisDefaultForitem(val) {
            if(val.length > 0) {
                val.forEach(item => {
                    item.isShowChecked= true
                    item.isDefault= false
                    if(item.children.length > 0) {
                        return this.setisDefaultForitem(item.children)
                    }
                })
            }
            return val
        },
        handleCheckChange(val, key) {
            var arr1= this.$refs.groupref.getCheckedNodes(false, true)
            var arr2= []
            if(arr1.length > 0 ) {
                arr1.forEach(item => {
                    arr2.push(
                        {
                            groupId: item.groupId,
                            isDefault: item.isDefault == false ? 0 : 1
                        }
                    )
                })
            }
            this.groups= arr2
           
            this.$emit('changeGroups', this.groups)
   
        },
        handleClickNode(key, node, data) {
            key= this.setisShowCheckedForitem(key, node, 1)
        },
        setisShowCheckedForitem(val, node, type) {
            val.isShowChecked= type == 1 ? !node.checked : !node
            if(val.children.length > 0) {
                val.children.forEach(item => {
                    item.isShowChecked= type == 1 ? !node.checked : !node 
                    if(item.children.length > 0) {
                        return this.setisShowCheckedForitem(item)
                    }
                })
            }
            return val   
        },
        /**匹配用户当前组状态 */
        getAllGroupsId(val, data) {
            if(val.length > 0) {
                for(let i=0; i< val.length; i++) {
                    for(let j=0; j< data.length; j++) {
                        if(val[i].groupId == data[j].groupId) {
                            data[j].isDefault= val[i].isDefault == 0 ? false : true
                            data[j].isShowChecked= false
                            if(data[j].children.length > 0) {
                                data[j].isShowChecked= true
                                this.allGroupIds.push(data[j].groupId)
                            }
                        }else{   
                            if(data[j].children.length > 0) {
                                this.getAllGroupsId(val, data[j].children)
                            }else{
                                continue
                            }
                        }
                    }
                }
            }
            return data;
        }
    }
}
</script>
<style lang="less" scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>